<style>
  .page {
    display: flex; /*设为伸缩容器*/
    flex-flow: row; /*伸缩项目单行排列*/
  }
  .sidebar {
    width: 300px;
  }

  #answers {
    flex: 1;
    margin-right: 20px;
  }
  .answer {
    margin-bottom: 20px;
    background-color: beige;
    border-bottom: 2px solid black;
  }
  img{width: 400px!important;}
</style>
<script src="getjson.js"></script>
<div class="page">
  <div id="answers">
    <div class="answer"></div>
  </div>
  <div class="sidebar">
    <h2>相关问题</h2>
    <div>
      <ul></ul>
    </div>
  </div>
</div>

<script>
  // 知乎回答的文件有4个an1-4.json
  // 相关问题 similar.json

  // getJSON('./similar.json').then((json) => console.log(json))
  const promises = [...Array(4)]
    .map((_, index) => `./an${index+1}.json`)
    .map(url => getJSON(url))
  Promise.all([
    getJSON('./similar.json'),
    ...promises
  ]).then(([similar, ...ans]) => {
    // 答案部分
    document.getElementById('answers').innerHTML =
      ans.reduce((items, an) => {
        return [...items, ...an.data]
      }, [])
      .map((item) => `<div class="answer">
          <h2>${item.author.name}</h2>
          ${item.content}
        </div>`
      ).join('')
    // 相关问题部分
    console.log(similar)
    document.querySelector('.sidebar ul').innerHTML =
      similar.data.map(
        item => `<li>${item.title}(${item.answer_count})</li>`
      )
      .join('')
  })

</script>
